<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音猜数字游戏</title>
    <style>
        :root {
            --primary-color: #2196F3;
            --success-color: #4CAF50;
            --error-color: #f44336;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 15px;
            background: #f5f5f5;
        }

        .container {
            max-width: 500px;
            margin: 0 auto;
        }

        .game-panel {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .input-group {
            display: flex;
            gap: 10px;
            margin: 15px 0;
        }

        input {
            flex: 1;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }

        button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: opacity 0.3s;
        }

        button:active {
            opacity: 0.8;
        }

        #history {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 15px;
        }

        .record-item {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .settings {
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="game-panel">
            <h2>语音猜数字游戏</h2>
            
            <div class="status">
                <p>剩余次数：<span id="attempts">5</span></p>
                <p>已用次数：<span id="used">0</span></p>
            </div>

            <div class="input-group">
                <input type="number" id="guessInput" 
                       placeholder="说数字或输入1-100" 
                       min="1" max="100">
                <button onclick="startVoiceInput()">🎤 语音</button>
                <button onclick="checkGuess()">提交</button>
            </div>

            <div id="message"></div>

            <div id="history">
                <h4>猜测记录</h4>
                <div id="records"></div>
            </div>
        </div>

        <div class="settings">
            <button onclick="toggleSettings()">⚙ 设置</button>
            <div id="settingsPanel" style="display:none;">
                <label>
                    <input type="checkbox" id="bgMusic"> 背景音乐
                </label>
                <label>
                    <input type="checkbox" id="voiceFeedback"> 语音反馈
                </label>
            </div>
        </div>
    </div>

    <script>
        // 游戏配置
        const config = {
            min: 1,
            max: 100,
            maxAttempts: 5,
            storageKey: 'gameSettings'
        }

        // 游戏状态
        let gameState = {
            secretNumber: null,
            attemptsLeft: config.maxAttempts,
            history: []
        }

        // 语音功能
        const synth = window.speechSynthesis;
        let recognition;
        let bgMusic = new Audio('https://actions.google.com/sounds/v1/alarms/beep_short.ogg');

        // 初始化
        function initGame() {
            gameState.secretNumber = Math.floor(Math.random() * 100) + 1;
            gameState.attemptsLeft = config.maxAttempts;
            gameState.history = [];
            updateDisplay();
            loadSettings();
        }

        // 语音输入
        function startVoiceInput() {
            if (!('webkitSpeechRecognition' in window)) {
                alert("当前浏览器不支持语音输入");
                return;
            }

            recognition = new webkitSpeechRecognition();
            recognition.lang = 'zh-CN';
            recognition.continuous = false;

            recognition.onresult = function(event) {
                const result = parseInt(event.results[0][0].transcript);
                if (!isNaN(result)) {
                    document.getElementById('guessInput').value = result;
                }
            }

            recognition.start();
        }

        // 语音反馈
        function speak(text) {
            if (!document.getElementById('voiceFeedback').checked) return;
            
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = 'zh-CN';
            synth.speak(utterance);
        }

        // 背景音乐控制
        function toggleMusic() {
            bgMusic.loop = true;
            bgMusic.volume = 0.3;
            bgMusic[bgMusic.paused ? 'play' : 'pause']();
        }

        // 游戏逻辑
        function checkGuess() {
            const input = document.getElementById('guessInput');
            const guess = parseInt(input.value);
            
            if (isNaN(guess) {
                showMessage("请说或输入有效数字！", 'var(--error-color)');
                return;
            }

            gameState.attemptsLeft--;
            gameState.history.push(guess);

            if (guess === gameState.secretNumber) {
                showMessage(`恭喜！正确答案是 ${gameState.secretNumber}`, 'var(--success-color)');
                speak("恭喜你猜对了！");
                setTimeout(initGame, 2000);
            } else {
                const hint = guess < gameState.secretNumber ? '小了' : '大了';
                const message = `第${config.maxAttempts - gameState.attemptsLeft}次：${guess} → ${hint}`;
                showMessage(message);
                speak(hint);

                if (gameState.attemptsLeft === 0) {
                    showMessage(`游戏结束！正确答案是 ${gameState.secretNumber}`, 'var(--error-color)');
                    speak("游戏结束");
                    setTimeout(initGame, 2000);
                }
            }

            input.value = '';
            updateDisplay();
        }

        // 显示消息
        function showMessage(text, color = '#333') {
            const el = document.getElementById('message');
            el.textContent = text;
            el.style.color = color;
        }

        // 更新界面
        function updateDisplay() {
            document.getElementById('attempts').textContent = gameState.attemptsLeft;
            document.getElementById('used').textContent = config.maxAttempts - gameState.attemptsLeft;
            
            const recordsEl = document.getElementById('records');
            recordsEl.innerHTML = gameState.history.map((num, i) => `
                <div class="record-item">
                    第${i+1}次：${num}
                </div>
            `).join('');
        }

        // 设置管理
        function toggleSettings() {
            const panel = document.getElementById('settingsPanel');
            panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
        }

        function loadSettings() {
            const settings = JSON.parse(localStorage.getItem(config.storageKey)) || {};
            document.getElementById('bgMusic').checked = settings.music || false;
            document.getElementById('voiceFeedback').checked = settings.voice || true;
            
            if (settings.music) toggleMusic();
        }

        function saveSettings() {
            const settings = {
                music: document.getElementById('bgMusic').checked,
                voice: document.getElementById('voiceFeedback').checked
            }
            localStorage.setItem(config.storageKey, JSON.stringify(settings));
        }

        // 事件监听
        document.getElementById('bgMusic').addEventListener('change', function() {
            toggleMusic();
            saveSettings();
        });

        document.getElementById('voiceFeedback').addEventListener('change', saveSettings);

        // 启动游戏
        initGame();
    </script>
</body>
</html>